<template>
  <div>App</div>
  <!-- 
    插槽：
      1. 默认插槽

      2. 具名插槽

      3. 作用域插槽
   -->
  <A>
    <!-- 标签内部内容就是插槽数据 -->
    <template #default>
      <div>111</div>
      <div>222</div>
      <div>333</div>
      <div>444</div>
      <div>555</div>
    </template>
  </A>

  <hr />

  <B>
    <!-- 
      希望传递的标签数据渲染到组件不同区域，使用具名插槽 
      
      优先使用默认插槽（优先最重要的内容使用默认插槽），如果有内容需要渲染到不同区域，在使用具名插槽（次要内容使用具名插槽）
    -->
    <template v-slot:header>
      <header>头部</header>
    </template>

    <!-- <template #content>
      <content>内容区</content>
    </template> -->

    <content>内容区111</content>

    <template #footer>
      <footer>底部</footer>
    </template>

    <content>内容区222</content>
  </B>
  <hr />

  <C>
    <!-- 作用域插槽数据一定是一个对象，往往会解构使用 -->
    <!-- <template v-slot="scoped">
      <div>111 {{ scoped.age }}</div>
    </template> -->
    <!-- <template v-slot="{ age }">
      <div>111 {{ age }}</div>
    </template> -->
    <!-- <template v-slot:default="{ age }">
      <div>111 {{ age }}</div>
    </template> -->
    <!-- 作用域插槽：给某个插槽（默认、具名）传递数据 -->
    <template #default="{ age }">
      <div>111 {{ age }}</div>
    </template>

    <template #footer="{ age }">
      <div>222 {{ age }}</div>
    </template>
  </C>
</template>

<script lang="ts" setup>
import A from "./A.vue";
import B from "./B.vue";
import C from "./C.vue";
</script>

<style></style>
